<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }

      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
      .cont p{
		  display: inline;
	  }
    </style>
  </head>
  <body>

    <h1>My shopping list</h1>
    <form>
    <div>
      <label for="item">Enter a new item:</label>
      <input type="text" name="item" id="item">
      <button type="button" onclick="addItem()">Add item</button>
    </div>
   
    <ul>
      <!-- <li><span>12312</span><button type="button" onclick="deleteTheDom()">Delete</button></li> -->
    </ul>
    <div class="cont">
      <span>购物车内的商品有：</span>
      <p id="cotent"></p>
      <button type="button" onclick="removeAll()">清空</button>
    </div>
  </form>
    <script>
      var _contentDom = document.getElementById("cotent");
      var goodsArr = [];
      document.getElementById("item").value = "";

      function addItem(){
          var itemValue = document.getElementById("item").value.trim();
          if(!itemValue){
            alert("请输入值");
            return false;
          }
          var itemValueArr = [];
          if(itemValue.indexOf("#")!=-1){
            itemValueArr = itemValue.split("#").filter(function(vv,ii){
              if(vv){
                return true;
              }
            });
          }else{
            itemValueArr.push(itemValue);
          }
          if(itemValueArr.length==0){
            return false;
          }

          document.getElementById("item").value = "";

          createLiElement(itemValueArr);
         
          
          

      }

      function createLiElement(itemValueArr){
        var _ulDom = document.getElementsByTagName("ul")[0];
        var _liFragment = null;
        var createsingleLiElement = function(itemV){
          if(goodsArr.indexOf(itemV) !== -1){
            return null;
          }
          goodsArr.push(itemV);
          var _li = document.createElement("li");
          var  _span = document.createElement("span");
          var _spanTextNode = document.createTextNode(itemV);    
          _span.appendChild(_spanTextNode);
          var  _button = document.createElement("button");
          _button.setAttribute("type","button");
          _button.setAttribute("onclick","deleteTheDom(this)");
          var _buttonTextNode = document.createTextNode("Delete");  
          _button.appendChild(_buttonTextNode);
          _li.appendChild(_span);
          _li.appendChild(_button);
          return _li;
        }
         if(itemValueArr.length === 1){
          _liFragment = createsingleLiElement(itemValueArr[0]);
         }else{
          _liFragment = document.createDocumentFragment();
          for(var j=0;j<itemValueArr.length;j++){
            var _liEE = createsingleLiElement(itemValueArr[j]);
            if(_liEE!=null){
              _liFragment.appendChild(_liEE);
            }
           
          }
         }
         if(_liFragment!=null){
          _ulDom.appendChild(_liFragment); 
         }
          if(goodsArr.length !=0){
            appendContent(goodsArr.join(","));
          }

      }

      function appendContent (str){
        if( _contentDom.hasChildNodes()){
              _contentDom.firstChild.nodeValue  = str;
            }else{
              _contentDom.appendChild(document.createTextNode( str));  
            }
      }

      function deleteTheDom(_ob){
        var _ulDom = document.getElementsByTagName("ul")[0];
        var spanValue = _ob.parentNode.firstChild.firstChild.nodeValue;
        goodsArr.splice(goodsArr.indexOf(spanValue),1);
        appendContent(goodsArr.join(","));
        _ulDom.removeChild(_ob.parentNode);
      }

      function removeAll(){
        appendContent('');
        goodsArr = [];
        var _ulDom = document.getElementsByTagName("ul")[0];
        document.getElementsByTagName('form')[0].replaceChild( document.createElement("ul"),_ulDom);
      }

    </script>
  </body>
</html>